<template>
	<view>
		<!-- 搜索 -->
		<view class="cu-bar search padding-top">
			<view class="search-form round">
				<u-icon name="search" class="margin-lr-sm" color="#E8E8E8" size="28"></u-icon>
				<input :adjust-position="false" type="text" v-model="keywords" placeholder-class="plc" placeholder="搜索你想要的商品"
				 confirm-type="search" @input="$u.debounce(search, 1000)"></input>
			</view>
		</view>

		<view class="padding-tb-sm padding-lr bg-white">
			<view class="grid col-2 goods">
				<view :class="[ (k%2==0) ? 'left' : 'right' ]" v-for="(i,k) in goods" :key="i.id" @click="$goto('/pages/shop/goods?id='+i.id)">
					<view class="good margin-top">
						<view class="bg-img" :style="'background-image: url(' + i.full_thumbnail + ')'"></view>
						<view class="info padding-xs">
							<view class="title">{{i.goods_name + ' ' + i.goods_attr[0].attr_name}}</view>
							<view class="price padding-tb-xs">
								<view class="cu-tag bg-orange sm margin-right-xs">
									会员价
								</view>
								<view class="text-price text-lg text-red text-cut margin-right-xs">
									{{i.goods_attr[0].attr_price}}
								</view>
								<view class="text-price text-sm text-gray text-cut margin-right-xs old">
									{{i.goods_attr[0].original_price}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- #ifndef H5 -->
			<view class="blank bg-white" style="height: 100rpx;"></view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keywords: '',
				goods: []
			};
		},
		onLoad() {
			this.search()
		},
		methods: {
			search() {
				this.$u.get('/goods/search', {
					keywords: this.keywords
				}).then(res => {
					if (res.data.code == 0) {
						let {
							goods
						} = res.data.result
						this.goods = goods
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.goods {
		.left {
			padding-right: 15rpx;
		}

		.right {
			padding-left: 15rpx;
		}

		.good {
			border: 1px solid #F3F3F3;

			.bg-img {
				width: 100%;
				padding-bottom: 100%;
			}

			.title {
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.info {
				height: 150rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.price {
					display: flex;
					align-items: center;

					.cu-tag {
						padding: 8rpx !important;
						font-size: 18rpx;
						height: 32rpx;
					}

					.old {
						text-decoration: line-through;
					}
				}
			}
		}
	}
</style>
